<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ITSM后台管理系统-登录页面</title>
<link rel="stylesheet" href="stylesheets/reset.css">
<link rel="stylesheet" href="stylesheets/index.css">
<script src="scripts/our.js"></script>
</head>
<body>
<div id="page">
  <!--页头-->
  <div id="header">
    <h1>ITSM后台管理系统</h1>
  </div>
  <!--内容-->
  <div id="content">
    <form action="">
      <label for="inp_username">
        <span>Username</span>
        <input id="inp_username" type="text">
        <span class="tip">请输入正确的用户名</span>
      </label>
      <label for="inp_password">
        <span>Password</span>
        <input id="inp_password" type="password">
        <span class="tip">请输入正确的密码</span>
      </label>
      <label for="btn_login">
        <a id="btn_login" href="javascript:void()">Sign in</a>
      </label>
    </form>
  </div>
  <!--页尾-->
  <div id="footer"></div>
</div>
<script>
document.on('domready', function () {
  var $inpUserName = $('#inp_username');
  var $inpPassword = $('#inp_password');
  var $btnLogin = $('#btn_login');
  var tip = $('form').findAll('span.tip');

  $btnLogin.on('click', function() {
    if (!$inpUserName.value || !$inpPassword.value) {
      alert('对不起，用户名或密码不能为空！');
    }
    else {
      var getLoginData = new Request('http://111.207.228.245/itsmservice/user/UserAction.ashx?method=login')
          .on('complete', function(e) {
            var data = JSON.parse(e.text);
            console.log(data);
            if ($inpUserName.value !== data.username) {
              tip[0].setStyle('display','inline-block');
            }
            if ($inpUserName.value === data.username) {
              location.href = 'subpage.html';
            }
          })
          .send({'username': $inpUserName.value, 'passwd': $inpPassword.value});
    }
  });

});
</script>
</body>
</html>
